<template>
  <div>
    <Home>
      <template v-slot:toRegister>注册</template>
      <template v-slot:haveAccount> 已有账号? </template>
      <template v-slot:goLogin>
        <span @click="goLogin">立即登录</span>
      </template>
      <template v-slot:messPut>
        <div class="personPut">
          <el-input
            class="messageinput"
            v-model="ruleForm.username"
            placeholder="请输入账号"
          >
            <template #prefix>
              <img src="../assets/user.svg" alt="" />
            </template>
          </el-input>
          <el-input
            class="messageinput"
            v-model="ruleForm.password"
            placeholder="请输入登录密码"
            type="password"
          >
            <template #prefix>
              <img src="../assets/lock-on.svg" alt="" />
            </template>
          </el-input>
          <el-input
            class="messageinput"
            v-model="ruleForm.checkpassword"
            placeholder="请再次输入登录密码"
            type="password"
          >
            <template #prefix>
              <img src="../assets/lock-on.svg" alt="" />
            </template>
          </el-input>
        </div>
      </template>
      <template v-slot:checkbutton
        ><el-button class="registerButton" @click="checkpassword"
          >继续</el-button
        ></template
      >
    </Home>
  </div>
</template>

<script lang="ts">
import { Vue } from "vue-class-component";
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import Home from "../components/Login-Register/home.vue";
import link from "@/api/link";
import apiUrl from "@/api/apiUrl";
export default class Register extends Vue {
  router = useRouter();
  //表单
  ruleForm = reactive({
    username: "",
    password: "",
    checkpassword: "",
    isalert: false,
    alertmessage: "",
  });
  //跳转至登录
  goLogin = () => {
    this.router.go(-1);
  };
  //
  checkpassword = () => {
    let data = {
      name: this.ruleForm.username,
      pwd: this.ruleForm.password,
    };
    link(apiUrl.register, "POST", data).then((ok: any) => {
      console.log(ok);
    });
  };
}
</script>
<style lang="less" scoped>
.personPut {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 0.32rem;
  height: 1.68rem;
  .messageinput {
    height: 0.4rem;
  }
  img {
    width: 0.16rem;
    height: 0.16rem;
    margin: 0;
    margin-right: 0.08rem;
  }
}
.registerButton {
  width: 4rem;
  height: 0.4rem;
  border-radius: 0.03rem;
  opacity: 1;
  background: rgba(22, 93, 255, 1);

  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  font-weight: 400;
  font-family: "PingFang SC";
  line-height: 24px;
}
</style>